<template>
  <div class="dataOverview-container">
   <button @click="telescopic" :class="['telescopicBtn',{'close': !isShow}]">点击</button>
   <div class="container-l">
     <div class="mapDiv">
       <map-chart :setOption='mapOption'></map-chart>
     </div>
     <div class="areaLineDiv echart-card">
       <area-chart></area-chart>
     </div>
   </div>
   <div class="container-r">
     <div class="gaugeDiv echart-card">
       <div class="pv">
         <gauge-chart :setOption="gaugeOption1"></gauge-chart>
       </div>
       <div class="uv">
         <gauge-chart :setOption="gaugeOption2"></gauge-chart>
       </div>
     </div>
     <div class="topBarDiv echart-card">
       <top-chart :setOption="topBarOption1"></top-chart>
     </div>
     <div class="topBarDiv echart-card">
       <top-chart :setOption="topBarOption2"></top-chart>
     </div>
   </div>
  </div>
</template>

<script>
import MapChart from '@/components/echarts/map'
import AreaChart from '@/components/echarts/area'
import TopChart from '@/components/echarts/topBar'
import GaugeChart from '@/components/echarts/gauge'
export default {
  data () {
    return {
      isShow: true,
      mapOption: {
        title: '用户分布图'
      },
      gaugeOption1: {
        title: 'PV',
        value: 20,
        color: '#ca62fa'
      },
      gaugeOption2: {
        title: 'UV',
        value: 30,
        color: '#f7d602'
      },
      topBarOption1: {
        title: '城市来源TOP10'
      },
      topBarOption2: {
        title: '页面来源TOP10'
      }
    }
  },
  components: {
    MapChart,
    AreaChart,
    TopChart,
    GaugeChart
  },
  methods: {
    telescopic () {
      this.isShow = !this.isShow
      this.$store.commit('changeShow')
    }
  }
}
</script>

<style lang="less" scoped>
.dataOverview-container {
  display: flex;
  height: 100%;
  max-width: 100%;
  background-image:radial-gradient(52% 100%, #237b95 50%, #0c3860 100%);
  box-sizing: border-box;
  padding: 20px 30px;
  position: relative;
  .telescopicBtn {
    width: 40px;
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: all .5;
    background:#002140;
    color: #ffffff;
    border: none;
    &.close {
      transform: translateY(0);
    }
  }
  .container-l {
    width: 69%;
    height: 100%;
    .mapDiv {
      height: 80%;
      box-sizing: border-box;
    }
    .areaLineDiv {
      height: 20%;
    }
  }
  .container-r {
    width: 29%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-left: 10px;
    &>div {
      height: 31%;
    }
    .gaugeDiv {
      display: flex;
      &>div {
        width: 50%;
        height: 100%;
      }
    }
  }
  .echart-card {
    border-radius: 10px;
    border: 2px solid #0584AF;
    position: relative;
    &::before {
      background-image:radial-gradient(50% 153%, #257e96 55%, #0c3860 100%);
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      opacity: 0.5;
    }
  }
}
</style>
